<template>
  <el-button :color="color" plain :dark="isDark" :disabled="disabled">
    <slot></slot>
  </el-button>
</template>

<script lang="ts" setup>
import { useGlobalStore } from '@/stores/global'

const props = defineProps<{
  type?: string
  disabled?: boolean
}>()

const global = useGlobalStore()

const isDark = computed(() => global.isDark)

const colorCollect: Record<string, string> = {
  green: '#0cca84',
  purple: '#5f72f4',
  blue: '#2684ff',
  yellow: '#f49b5f',
  'light-green': '#4ee2c5',
  orange: '#f4c25f',
  'rose-red': '#d976dd',
  red: '#fb6b81'
}

const color = computed(() => (colorCollect[props.type] ? colorCollect[props.type] : '#2684ff'))
</script>
